<template>
  <!-- 仓库管理 -->
  <div class="ckgl">
    <!-- 头部区域 -->
    <el-card class="box-card" >
      <el-form :inline="true" :model="page">
        <el-row>
          <el-col :span="6">
            <el-form-item label="仓库编号">
              <el-input placeholder="请输入" v-model.trim="page.like_code"></el-input> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="仓库名称">
              <el-input placeholder="请输入" v-model.trim="page.like_name"></el-input> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="仓库状态">
              <el-select placeholder="请选择"  v-model="page.status">
                <el-option :label="item.value" :value="item.num" v-for='item in status' :key="item.num"> </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"><div class="btn">
        <el-button type="primary" @click="submit">搜索</el-button>
        <el-button @click="clearFn">重置</el-button>

      </div>
       </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 表格区域 -->
    <el-card class="table-card" >
      <div slot="header" class="clearfix">
        <el-button type="primary" round @click="$router.push('/details')">新增仓库</el-button>
      </div>
      <el-table :data="ckList" border style="width: 100%">
        <el-table-column prop="date" label="序号" type="index" min-width="80">
        </el-table-column>
        <el-table-column prop="code" label="仓库编码" min-width="180">
        </el-table-column>
        <el-table-column min-width="180" prop="name" label="仓库名称">
        </el-table-column>
        <el-table-column
          min-width="180"
          prop="type"
          label="仓库类型"
          :formatter="typeFormAtter"
        >
        </el-table-column>
        <el-table-column min-width="180" prop="location" label="省/市/区">
        </el-table-column>
        <el-table-column min-width="180" prop="address" label="详细地址">
        </el-table-column>
        <el-table-column
          min-width="180"
          prop="status"
          label="仓库状态"
          :formatter="statuFormAtter"
        >
        </el-table-column>
        <el-table-column min-width="180" prop="surface" label="仓库面积㎡">
        </el-table-column>
        <el-table-column min-width="180" prop="includedNum" label="仓库数量">
        </el-table-column>
        <el-table-column min-width="180" prop="personName" label="负责人">
        </el-table-column>
        <el-table-column min-width="180" prop="phone" label="联系电话">
        </el-table-column>
        <el-table-column min-width="180" prop="updateTime" label="更新时间">
        </el-table-column>
        <el-table-column min-width="180" fixed="right" prop="" label="操作">
          <template v-slot={row}>
            <span class="btn" @click="editFn(row)">编辑</span>
            <span class="btn" @click="editStatus(row)">
              <i style="font-style: normal;" v-if="row.status===0">启用</i>
              <i style="font-style: normal;" v-else>停用</i>
            </span>
            <span class="btn" @click="delFn(row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <Fenye
        :total="Number(total)"
        :page.sync="page.current"
        :size.sync="page.size"
        :pager="pages"
        @genxin='getCkList'
      ></Fenye>
    </el-card>
    <!-- 启用与停用弹出框 -->
    <Edit :visible.sync='editVisible' :editObj='editObj' :str='str' @editGenXin='getCkList'></Edit>
  </div>
</template>

<script>
import Edit from './components/Edit.vue'
import Fenye from './components/Fenye.vue'
import { getCkList, delCk } from '@/api/warehouse'
export default {
  components: {
    Fenye,
    Edit
  },
  data () {
    return {
      editVisible: false,
      status: [{ num: 0, value: '停用' }, { num: 1, value: '启用' }, { num: null, value: '全部' }],
      page: {
        like_code: '',
        like_name: '',
        status: '',
        current: 1, // 当前页
        size: 10, // 一页条数
        descs: 'createTime'
      },
      total: 0, // 总条数
      ckList: [],
      pages: '', // 总页数
      editObj: {}, // 修改存放的数据
      str: '',
      seeObj: {}// 编辑的数据
    }
  },
  created () {
    this.getCkList()
  },
  mounted () {},
  methods: {
    // 仓库列表
    async getCkList () {
      const { data } = await getCkList(this.page)
      console.log(data)
      this.ckList = data.records
      this.total = data.total
    },
    // 仓库类型数据处理
    typeFormAtter (row, column, cellValue, index) {
      if (cellValue === 'ZZ') return '中转仓'
      if (cellValue === 'JG') return '加工仓'
      if (cellValue === 'CB') return '储备仓'
      if (cellValue === 'LC') return '冷藏仓'
    },
    // 仓库状态数据处理
    statuFormAtter (row, column, cellValue, index) {
      if (cellValue === 0) {
        return '停用'
      }
      if (cellValue === 1) {
        return '启用'
      }
    },
    // 搜索提交
    submit () {
      this.getCkList()
    },
    // 重置
    clearFn () {
      this.page = {
        like_code: '',
        like_name: '',
        status: '',
        current: 1, // 当前页
        size: 10, // 一页条数
        descs: 'createTime'
      }
      this.getCkList()
    },
    // 删除
    async delFn (id) {
      await this.$confirm('确定删除吗？')
      await delCk({ 'ids[]': id })
      this.getCkList()
      this.$message.success('删除成功')
    },
    // 停用与启用
    editStatus (row) {
      this.editVisible = true
      this.editObj = row
      if (row.status === 1) {
        this.str = '停用'
      } else if (row.status === 0) {
        this.str = '启用'
      }
    },
    // 编辑
    editFn (row) {
      // console.log(row)
      this.$router.push({
        path: '/edit',
        query: {
          addForm: row
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.ckgl {
  box-sizing: border-box;
}
</style>
